<template>
  <n-cascader v-bind="props" :options="options" filterable />
</template>

<script setup lang="ts">
  import { NCascader } from 'naive-ui'
  import Region from '@/assets/libs/region.min.js'
  import { onMounted, ref } from 'vue'

  const props = defineProps({
    ...NCascader.props,
    checkStrategy: {
      type: String,
      default: 'child'
    },
    filterable: {
      type: Boolean,
      default: true
    },
    level: {
      type: Number,
      default: 3
    }
  })

  const regionData = Region
  const options = ref([])

  onMounted(() => {
    if (props.level !== 3) {
      handleData()
    }
    options.value = regionData
  })

  function handleData() {
    if (props.level === 1) {
      regionData.forEach((item) => {
        item.children = null
        return item
      })
    } else if (props.level === 2) {
      regionData.forEach((item) => {
        item.children &&
          item.children.forEach((it) => {
            it.children = null
          })
        return item
      })
    }
  }
</script>

<style lang="scss" scoped></style>
